import Swiper from 'swiper'

let SwiperInfo = null;

const SwiperFn = (delay = 3000) => {
    let swiperInfo2 = new Swiper('.swiper-container', {
        init: true,
        effect: 'fade', // 这个地方必须用淡入淡出的效果，在4k屏幕上有兼容问题，会先白屏再显示图片
        fadeEffect: {
            crossFade: true,
        },
        updateTranslate: true,
        autoplay: {
            delay: delay,
            stopOnLastSlide: false,
            disableOnInteraction : false,
            reverseDirection: false
        },
        lazy: {
            loadPrevNext: true, // 仅加载可见slide的前后图片
            loadOnTransitionStart: true // 在transition开始时加载图片
        },
        speed: 1000,
        loop: true,    //可选选项，开启循环
        loopPreventsSlide: true,//默认true，阻止
        loopAdditionalSlides: 3,
        centeredSlides: true,
        observer: true,//修改swiper自己或子元素时，自动初始化swiper
        observeParents: true,//修改swiper的父元素时，自动初始化swiper
        slidesPerView: "auto",
        pagination: {
            el: '.swiper-pagination',
            type: 'fraction'
        },

        on: {
            slideChange: (el) => {
                console.log('滑动结束')
            },
        },
    });
    return SwiperInfo = swiperInfo2;
};

export default {

    binding(el, binding, vnode) {
        console.log('binding');
    },

    inserted(el, binding, vnode) {
        // console.log('inserted');
        let {delay = 3000, current, length} = binding.value;
        console.log(`1`)
        if (current === length - 1) {
            if (!SwiperInfo) {
                setTimeout(async () => {
                    SwiperInfo = await SwiperFn(delay);
                }, 1000);
            } else {
                SwiperInfo.update();
            }
        }
    },

    updated(el, binding, vnode, oldVnode) {
        let {delay = 3000, index, length} = binding.value;
        console.log(binding.value)
        if (!SwiperInfo) {
            SwiperInfo = SwiperFn(delay);
        } else {
            SwiperInfo.update();
        }
    },

    componentUpdated(el, binding, vnode, oldVnode) {
        let {delay = 3000, index, length} = binding.value;
        if (!SwiperInfo) {
            SwiperInfo = SwiperFn(delay);
        } else {
            SwiperInfo.update();
        }
    },

    unbind(el, binding, vnode) {
        // console.log('unbind');
        SwiperInfo = null
    }
}
